<!DOCTYPE HTML>
<html>
<head>
<#include "WEB-INF/view/_frag/meta.ftl">
<#include "WEB-INF/view/_frag/jscss.ftl">
<title>添加新闻</title>
<style>
	.container {
        width: 600px;
        margin: 0 auto;
    }
    .container img{
        width: 45%;
        margin-right: 5%;
        margin-bottom: 30px;
        float: left;
    }
    #popup{
        position: fixed;
        left: 0px;
        top: 100px;
        width: 100%;
        height: 100%;
        text-align: center;
        display: none;
    }
    #popup .bg{
        background-color: rgba(0,0,0,0.5);
        margin-left: 10%;
        width: 80%;
        height: 80%;
    }
    @media \0screen\,screen\9 {
        #popup .bg{
            background-color:#000000;
            filter:Alpha(opacity=50);
            position:static;
        }
        #popup .bg img{
            position: relative;
        }
    }
    #popup img{
        max-width: 100%;
        max-height: 100%;
    }
</style>
</head>
<body>
<#if message == 'update'>
<script type="text/javascript">
//layer.alert("修改成功");
layer.alert('修改成功', function(index){
	  //do something
		window.history.go(-1);
});
</script>
</#if>
<article class="page-container">
	<form id="form-add" class="form form-horizontal"  action="${basePath}/appNews/${ask}" method="post" enctype="multipart/form-data">
		<input type="hidden" name="page_num" value="${page_num}"/>
		<input type="hidden" name="ask" value="${ask}"/>
		<input type="hidden" name="appNews.id" value="${appNews.id}"/>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>标题：</label>
			<div class="formControls col-xs-8 col-sm-6">
				<input type="text" class="input-text"   placeholder=""   name="appNews.title" value="${appNews.title}">
			</div>
		</div>	
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>链接：</label>
			<div class="formControls col-xs-8 col-sm-6">
				<input type="text" class="input-text"   placeholder=""   name="appNews.url" value="${appNews.url}" required>
			</div>
		</div>
		
		<!--
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">图片：</label>
			<div class="formControls col-xs-8 col-sm-4">
				<#if ask=="update">
				<img id="preview" name="preview" src="${basePath}/${appNews.picture}" style="height:130px;width:117px;border-width:0px;">
                <input type="hidden" name="appNews.picture" value="${appNews.picture}">
 				</#if>
                <input id="file_upload" class="form-control" type="file" name="pic" accept="image/jpeg,image/png,image/gif">
               	
 			</div>
		</div>
		
		 
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">图片：</label>
			<div class="formControls col-xs-8 col-sm-4">
				<#if ask=="update">
				<img id="preview" name="preview" src="${basePath}/${appNews.picture}" style="height:130px;width:117px;border-width:0px;">
                <input type="hidden" name="appNews.picture" value="${appNews.picture}">
 				</#if>
                <input id="file_upload" class="form-control" type="file" name="pic" accept="image/jpeg,image/png,image/gif">
               	
 			</div>
		</div>
		 -->
		
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">选择后不可更改*</span>类型：</label>
			
			<div class="formControls col-xs-8 col-sm-7">
				<span class="select-box" style="width:130px">
				<#if appNews.picture!=''>
					<select id="ptype" class="select valid" size="1" name="appNews.news_type" aria-required="true" aria-invalid="false" style="width:120px" onchange="show_div(this);" disabled="disabled">
				<#else>
					<select id="ptype" class="select valid" size="1" name="appNews.news_type" aria-required="true" aria-invalid="false" style="width:120px" onchange="show_div(this);">
				</#if>
						<!-- <option value="-1">请选择</option> -->
						
						<#list page.news_type as news_type>
							<#if appNews.news_type == news_type.c_key>
								<option value="${news_type.c_key}" selected="selected">${news_type.c_value}</option>
							<#else>
								<option value="${news_type.c_key}">${news_type.c_value}</option>
							</#if>
						</#list>
					</select>
				</span>
			</div>
			
			 
		</div>
		 
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">图片：</label>
			<div class="formControls col-xs-8 col-sm-7">
			 	<#if appNews.picture!=''>
			 	 	<#if appNews.news_type == 1>
				 		<#list appNews.picture?split(",") as s>  
				 		<div>
						<img id="preview${s_index+1}" name="preview${s_index+1}" style="height:130px;width:117px;border-width:0px;" src="${basePath}/${s}">
						<input id="file_upload${s_index+1}" class="form-control" type="file"  name="pic${s_index+1}" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
						<br>
						<br>
						<#assign num =s_index+1>
						</#list>
						<#if num <3 >
							<#list num+1..3 as t>
						 	<img id="preview${t}" name="preview" style="height:130px;width:117px;border-width:0px;">
								<input id="file_upload${t}" class="form-control" type="file"  name="pic${t}"  accept="image/jpeg,image/png,image/gif">
								<br>
								<br>
							</#list>
						</#if>
						</div>
					<#else>
						<div>
							<img id="preview1" name="preview1" style="height:130px;width:117px;border-width:0px;" src="${basePath}/${appNews.picture}">
							<input id="file_upload1" class="form-control" type="file"  name="pic1" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
						</div>
					</#if>	 
				
					<!-- 把有的记录3-已有记录 循环出没有的input -->
				<#else>
				
				<div id="dantu">
						<img id="preview4" name="preview4" style="height:130px;width:117px;border-width:0px;">
					    <input id="file_upload4" class="form-control" type="file"  name="pic1"  accept="image/jpeg,image/png,image/gif" required="required">
				</div>
				<div id="duotu" style="display: none">	
					<#list 1..3 as t>
					 	<img id="preview${t}" name="preview${t}" style="height:130px;width:117px;border-width:0px;">
							<input id="file_upload${t}" class="form-control" type="file"  name="pic${t}"  accept="image/jpeg,image/png,image/gif" required="required">
							<br>
							<br>
						</#list>
					</#if>
				</div>
                <input type="hidden" name="appNews.picture" value="${appNews.picture}"> 
  			</div>
		</div>
		
		<!-- 
		
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">热点：</label>
			<div class="formControls col-xs-8 col-sm-4">
				 <#if appNews.hotspot=='1'> 
                	<input type="checkbox" name="appNews.hotspot"   checked>
                	
                <#else>
                	<input type="checkbox" name="appNews.hotspot">
 			 	</#if>
               	
 			</div>
		</div>
		 -->
		

		<div class="row cl">
			<div class="text-r col-xs-2 col-sm-2 col-xs-offset-4 col-sm-offset-4">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
			<div class="text-l col-xs-3 col-sm-2">
				<!-- <a class="btn btn-primary radius" href="${basePath}/appNews/list"><span class="glyphicon glyphicon-arrow-left"></span> 返回</a> -->
				<a class="btn btn-primary radius" href="javascript:window.history.back(-1); "><span class="glyphicon glyphicon-arrow-left"></span> 返回</a>
			</div>
		</div>
		
		<div id="popup">
			    <div class="bg"><img src="" alt=""/></div>
		</div>
	</form>
</article>

<script type="text/javascript">
function show_div(){
	//alert($('#ptype option:selected').val());
	if($('#ptype option:selected').val()==1)
	{
		$("#dantu").hide();
		$("#duotu").show();
	}
	else{
		$("#dantu").show();
		$("#duotu").hide();
	}
	//$('#pic_select option:selected') .val();//选中的值
	
	

}

$(function(){
	$("#form-add").validate({
		rules:{
			'appNews.title':{
				required:true,
				//minlength:1,
				//maxlength:8
			}
			
		}
	
		
	});
	
});


for (var i=1;i<5;i++){
	$("#preview"+i).click(function (event) {
		event = event||window.event;
	    var target = document.elementFromPoint(event.clientX, event.clientY);
	    var popup = document.getElementById("popup");
	    //alert(target.src);
	    popup.getElementsByTagName("img")[0].src = target.src;
	    popup.style.display = "block";
	});
}
$("#popup").click(function () {
	$("#popup")[0].style.display = "none";
});


$("#preview").click(function () {
//	alert("122");
});

//for (var i=1;i<4;i++){
	$("#file_upload1").change(function () {
		var $file = $(this);
		var fileObj = $file[0];
		var windowURL = window.URL || window.webkitURL;
		var dataURL;
		var $img = $("#preview1");
	
		if (fileObj && fileObj.files && fileObj.files[0]) {
			dataURL = windowURL.createObjectURL(fileObj.files[0]);
			$img.attr('src', dataURL);
		} else {
			dataURL = $file.val();
			var imgObj = document.getElementById("preview1");
			// 两个坑:
			// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
			// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
			imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
	
		}
	});
	
	$("#file_upload4").change(function () {
		
		var $file = $(this);
		var fileObj = $file[0];
		var windowURL = window.URL || window.webkitURL;
		var dataURL;
		var $img = $("#preview4");
		
		if (fileObj && fileObj.files && fileObj.files[0]) {
			dataURL = windowURL.createObjectURL(fileObj.files[0]); 
			$img.attr('src', dataURL);
		} else {
			dataURL = $file.val();
			var imgObj = document.getElementById("preview4");
			imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
	
		}
	});
//}

	$("#file_upload2").change(function () {
		//alert(11111);
		var $file = $(this);
		var fileObj = $file[0];
		var windowURL = window.URL || window.webkitURL;
		var dataURL;
		var $img = $("#preview2");
		if (fileObj && fileObj.files && fileObj.files[0]) {
			dataURL = windowURL.createObjectURL(fileObj.files[0]);
			$img.attr('src', dataURL);
		} else {
			dataURL = $file.val();
			var imgObj = document.getElementById("preview2");
			imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
	
		}
	});
	
	$("#file_upload3").change(function () {
		var $file = $(this);
		var fileObj = $file[0];
		var windowURL = window.URL || window.webkitURL;
		var dataURL;
		var $img = $("#preview3");
		if (fileObj && fileObj.files && fileObj.files[0]) {
			dataURL = windowURL.createObjectURL(fileObj.files[0]);
			$img.attr('src', dataURL);
		} else {
			dataURL = $file.val();
			var imgObj = document.getElementById("preview3");
			imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
	
		}
	});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
 
</body>
</html>